<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <!-- v-for 指令 用来循环渲染，渲染数据 生
       成虚拟dom 转换真实dom的过程 -->
       <!-- 面试题!!, v-for 为什么要加key  -->
       <!-- 由于vue2 的 v-for 生成都是虚拟dom, 虚拟dom 操作过程中,如删除等操作 会发位置错乱 加key 防止错乱,vue的diff算法 需要key 更高效的更新dom-->

       <!-- v-for="item in 数组" 
        item 代表数组的每一项
         key 尽量用唯一标识 -->
      <!-- 
       面试题 :什么是虚拟dom    
       虚拟dom 就是用js对象模拟的真实dom,操作js对象,要比操作真实dom 快很多,提升性能,结合diff算法更新更高效

      -->
       <!-- 模拟虚拟dom 
        <div id="app" class="box">你好 <span>世界</span></div>

        let div={
           tag:"div",
           attrs:{
            id:"app",
            class:"box",
            key:"12"
           },
           children:["你好",{tag:"span",attrs:{},children:["世界"]}]
        }
       -->
      <li v-for="item in list" :key="item">{{item}}</li>  
      <hr>
      <!-- v-for="(item,index) in 数组" index--数组下标 -->
      <li v-for="(item,index) in list" :key="index">
        {{index}}----{{item}}
      </li>
    </ul>
    <!-- 商品列表 -->
    <div class="list" >
      <div class="list_one" style="margin:10px 0; background-color: aquamarine;"
      v-for="(item,index) in proList" :key="item.id">
        <div>名字：{{item.name}}</div>
        <div>价格：{{item.price}}</div>
        <div>颜色：{{item.color}}</div>
      </div>
    </div>
  </div>
      <script src="./vue.js"> </script>
      <script>
        new Vue({
          el:"#app",
          data(){
            return{
              list:["哈尔滨","廊坊","北京","成都"],
              proList:[
                {
                  id:"1001",
                  name:"电脑",
                  price:1000,
                  color:"红色"
                },
                {
                  id:"1002",
                  name:"手机",
                  price:2000,
                  color:"蓝色"
                },
                {
                  id:"1003",
                  name:"冰箱",
                  price:3000,
                  color:"绿色"
                }
              ]
            }
          }
        })
      </script>
</body>
</html>